<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- navbar -->
        <u-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" :fixed="true"
            @leftClick="back" title="保证金专户"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <!-- select -->
        <uni-select class="uniselect" :style="{top:$u.sys().statusBarHeight+44+'px'}" 
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <!-- 占位 -->
        <view style="height:74rpx"></view>
 

        <view class="uni-area">
            <!-- 保证金统计概览 -->
            <view class="u-m-t-50 u-font-32 font-bold">保证金统计概览</view>
            <view class="u-m-t-30 uni-shadow u-p-t-10" style="background:#fff">
                <u-row customStyle="flex-wrap:wrap">
                    <u-col v-for="(item,index) in bzjTotal" :key="index" :span="item.span"
                        class="u-m-t-20 u-font-26" style="flex-direction:row">
                        <text class="u-m-r-14 uni-dec-color">{{item.title}}</text>
                        <text>{{item.value}}{{item.unit}}</text>
                    </u-col>
                </u-row>
            </view>

            <!-- 保证金列表 -->
            <view class="u-m-t-50 u-font-32 font-bold">保证金列表</view>
            <uni-item-bzj class="u-m-t-30" v-for="(item,index) in page.list" :key="index" :bzj="item" />
      
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 下拉选择数据
				selectData:[
                    { label: "属地", list: [], show: false, type: "districtId", value: '' },
                    { label: "企业类型", list: [], show: false, type: "dwlx", value: '' },
                ],
                totalPrameter:{
                    districtId: '', // 区划值【非必传】
                    bhfl: '', // 保证金类型【非必传】
                },
                bzjTotal:[ // 保证金统计概览
                    { field:'bzjzhSl', span:5, title:'保证金专户', value:'0', unit:'个' },
                    { field:'bzjzhZe', span:7, title:'保证金专户余额', value:'0', unit:'万元' },
                    { field:'bhbxSl', span:5, title:'保函/保险', value:'0', unit:'个' },
                    { field:'bhbxZe', span:7, title:'担保/保险总额', value:'0', unit:'万元' },
                    { field:'bhbxSyje', span:6, title:'保证金已使用', value:'0', unit:'万元' },
                ],
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},


        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getEntList()
            }else{
                this.page.status = 'nomore'
            }
        },


		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.totalPrameter.districtId = res.value
                // 保证金类型
                this.getBzjType()
            })
        },


		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=enterprise&total='+this.page.total })
            },


            // 保证金类型
            getBzjType(){
                const api = JSON.parse(JSON.stringify(this.$apis.CommonDictionaries))
                api.url+='bhfl'
                this.$request(this,api,{}).then(res=>{
                    res.unshift({ dictLabel: '保证金专户', dictValue: 0 })
                    res.unshift({ dictLabel: '全部保证金类型', dictValue: 100 })
                    const obj = {
                        label: res[0].dictLabel,
                        value: res[0].dictValue,
                        show: false,
                        type: 'bhfl',
                        list: []
                    }
                    res.map((v, i) => {
                        obj.list.push({
                            label: v.dictLabel,
                            value: v.dictValue,
                        })
                    })
                    this.selectData.splice(1,1,obj)
                    this.totalPrameter.bhfl = res[0].dictValue
                    // 保证金统计概览
                    this.getBzjTotal()
                    // 保证金列表
                    this.getList()
                })
            },


            // 保证金统计概览
            getBzjTotal(){
                const rq = Object.assign(this.totalPrameter,{searchTerminal:'PC'})
                this.$request(this,this.$apis.bzjTotal,rq).then(res=>{
                    // console.log('保证金统计概览',res)
                    this.bzjTotal.map((v,i)=>{
                        v.value = res[v.field]
                    })
                })
            },
            // 保证金列表
            getList(){
                this.page.status = 'loading'
                const rq = Object.assign(this.totalPrameter,this.paging,{searchTerminal:'PC'})
                this.$request(this,this.$apis.bzjList,rq).then(res=>{
                    this.page.total = res.total
                    const { rows } = res
                    // console.log('保证金列表',rows)
                    if( res.total  ){
                        this.page.status = 'loadmore'
                        rows.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂未查询到更多数据')
                    }
                })
            },


            // 下拉选择
            select(e){
                this.totalPrameter[e.type] = e.value
                // 保证金统计概览
                this.getBzjTotal()
                // 保证金列表
                this.paging.pageNum = 1
                this.page.list = []
                this.getList()
                this.toTop()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
